<?php ?>

<!-- Page wrapper with auto width -->
<div id="page-wrapper">

  <nav class="navbar navbar-default">
    <div class="container">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse"
        data-target="#bs-example-navbar-collapse-1">
          <span class="sr-only">Toggle navigation</span><span
          class="icon-bar"></span><span class="icon-bar"></span><span
          class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#"> <?php print($site_name); ?> </a>
      </div>

      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse"
      id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
          <li class="active">
            <a href="#">Link</a>
          </li>
          <li>
            <a href="#">Link</a>
          </li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle"
            data-toggle="dropdown">Dropdown <b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li>
                <a href="#">Action</a>
              </li>
              <li>
                <a href="#">Another action</a>
              </li>
              <li>
                <a href="#">Something else here</a>
              </li>
              <li class="divider"></li>
              <li>
                <a href="#">Separated link</a>
              </li>
              <li class="divider"></li>
              <li>
                <a href="#">One more separated link</a>
              </li>
            </ul>
          </li>
        </ul>
        <form class="navbar-form navbar-left">
          <div class="form-group">
            <input type="text" class="form-control" placeholder="Search">
          </div>
          <button type="submit" class="btn btn-default">
            Submit
          </button>
        </form>
        <ul class="nav navbar-nav navbar-right">
          <li>
            <a href="#">Link</a>
          </li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle"
            data-toggle="dropdown">Dropdown <b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li>
                <a href="#">Action</a>
              </li>
              <li>
                <a href="#">Another action</a>
              </li>
              <li>
                <a href="#">Something else here</a>
              </li>
              <li class="divider"></li>
              <li>
                <a href="#">Separated link</a>
              </li>
            </ul>
          </li>
        </ul>
      </div>
      <!-- /.navbar-collapse -->
    </div>
    <!-- /.container-fluid -->
  </nav>

  <!-- Main wrapper -->
  <div id="primary-wrapper" class="container-fluid blue main-bg">
    <div id="primary" class="container">
      <div class="row">
        <div class="col-lg-1">
          &nbsp;
        </div>
        <div id="gear-system-wrapper" class="col-lg-6">
          <div id="mycontact-wrapper" class="square-130">
            <div id="mycontact-gear" class="circle-130 gear-pic-2">
              <div id="mycontact" class="circle-90 white"></div>
            </div>
            <span id="mycontact-link" class="link-wrapper">Contact</span>
          </div>

          <div id="profile-pic-wrapper" class="square-280">
            <div id="profile-pic-gear" class="circle-280 gear-pic-1">
              <div id="profile-pic" class="circle-200 profile-pic">
                <div class="grid circle-200"></div>
              </div>
            </div>
          </div>
          <div id="mywork-wrapper" class="square-180">
            <div id="mywork-gear" class="circle-180 gear-pic-2">
              <div id="mywork" class="circle-125 white"></div>
            </div>
            <span id="mywork-link" class="link-wrapper">My work</span>
          </div>
          <!-- 					<div id="myresume-wrapper" class="square-200"> -->
          <!-- 						<div class="circle-200 gear-pic-2"> -->
          <!-- 							<div id="mywork" class="circle-145 white"></div> -->
          <!-- 						</div> -->
          <!-- 					</div> -->
        </div>
        <div id="main-biography-wrapper" class="col-lg-5">
          <div class="jumbotron">
            <?php if ($page['greeting']): ?>
                <?php print render($page['greeting']); ?>
            <?php else: ?>
                <h1>Hello</h1>
                <h2>a bit about me:</h2>
                <p>
                  I am second year student at University of Waterloo. I created this website in order to show my work to future employers.
                </p>
            <?php endif; ?>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Secondary wrapper -->
  <div id="secondary-wrapper" class="container-fluid width">
    <div id="secondary" class="container">
      <div class="row">
          <div class="col-lg-8">
              <?php if($page['resume']): ?>
                    <?php print render($page['resume']); ?>
              <?php endif; ?>
          </div>
          <div class="col-lg-4"></div>
      </div>
    </div>
  </div>

  <div id="footer-wrapper">
    <div class="front_footer section clearfix">
      <div class="column-4">
        <div class="small-circle">
          <div id="phone"></div>
        </div>
        <h3><b>Call</b></h3>

        <p>
          <b>T: 647-296-0831</b>
        </p>
      </div>
      <div class="column-4">
        <div class="small-circle">
          <div id="email"></div>
        </div>
        <h3><b>Contact</b></h3>

        <p>
          <b>hthl85@gmail.com</b>
        </p>
      </div>
      <div class="column-4">
        <div class="small-circle">
          <div id="social"></div>
        </div>
        <h3><b>Follow me</b></h3>
        <a href="http://twitter.com/hthl85"> <span id="twitter"></span> </a><a href="http://facebook.com/hthl85"> <span id="facebook"></span> </a><a
        href="https://plus.google.com/u/0/114186067186607899022?rel=author"> <span id="google"></span> </a>
      </div>
      <div class="column-4">
        <div class="small-circle">
          <div id="copy"></div>
        </div>
        <h3><b>&copy; 2014 by grangle.net</b></h3>

        <p>
          Proud of you.
        </p>
      </div>
    </div>
  </div>
</div>
